<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
          <el-breadcrumb-item><i class="el-icon-lx-service"></i> 编排管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card>
      <el-row :gutter="20">
       
        <el-col :span="10">
          <el-input v-model.number="eventDays" placeholder="请输入比赛天数"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="getAlgorithmAns()">获取编排结果</el-button>
        </el-col>
      </el-row>
      <div v-for="each in competitions" :key="each.eid">
        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                比赛日期
              </div>
            </template>
              {{each.eventDay}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                比赛时间
              </div>
            </template>
              {{each.eventTime}}
          </el-descriptions-item>
          <el-descriptions-item>
              <template #label>
                  <div class="cell-item">
                  比赛地点
                  </div>
              </template>
              {{each.eventPosition}}
          </el-descriptions-item>
          
          <el-descriptions-item>
              <template #label>
                  <div class="cell-item">
                比赛名称
                  </div>
              </template>
          <el-tag size="small">{{each.cname}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
              <template #label>
                  <div class="cell-item">
                比赛预估时间
                  </div>
              </template>
          {{each.timeNeed}}
          </el-descriptions-item>
          <el-descriptions-item>
              <template #label>
                  <div class="cell-item">
                比赛规则
                  </div>
              </template>
          {{each.crule}}
          </el-descriptions-item>
          <el-descriptions-item>
              <template #label>
                  <div class="cell-item">
                比赛裁判
                  </div>
              </template>
          {{each.headJudge}}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    
  </div>
    
</template>

<script>
  import { reactive,ref } from 'vue';
  import { useStore } from 'vuex';
  export default {
    setup(){
      const store = useStore();
      const competitions = reactive([])

      const eventDays = ref(3);

      //获取算法编排结果
      const getAlgorithmAns = () => {
        // console.log("天数",eventDays.value)
        store.dispatch("ArrangeCompetition",eventDays.value).then(res => {
          if(res==="ok"){
            store.dispatch("GetArrangeResult").then(res2 => {
              competitions.splice(0,res2.length, ...res2)
            })
          }
        })
      }
      
      return {
        competitions,
        eventDays,
        getAlgorithmAns,
      } 
    } 
  }
</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
